<template>
  <div>
    <div class="fly-panel fly-column">
      <div class="layui-container">
        <ul class="layui-clear">
<!--          <li class="layui-hide-xs layui-this"><a href="/">首页</a></li>
          <li><a href="jie/index.html">提问</a></li>
          <li><a href="jie/index.html">分享<span class="layui-badge-dot"></span></a></li>
          <li><a href="jie/index.html">讨论</a></li>
          <li><a href="jie/index.html">建议</a></li>
          <li><a href="jie/index.html">公告</a></li>
          <li><a href="jie/index.html">动态</a></li>-->
          <router-link to="/">
            <li v-for="(nav, index) in this.$store.state.navs"
                :key="nav.id"
                @click="selectedNav(index, nav.id)"
                :class="[index == selected ? navClass : '']">
              <a>{{nav.name}}</a>
            </li>
          </router-link>
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

          <!--
          用户登入后显示
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index.html">我发表的贴</a></li>
          <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index.html#collection">我收藏的贴</a></li>
          -->
        </ul>

        <div class="fly-column-right layui-hide-xs">
<!--          <span class="fly-search"><i class="layui-icon"></i></span>-->
          <router-link to="/publish" class="layui-btn">发表新帖</router-link>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeNav',
  props: {
    category: Array
  },
  data () {
    return {
      page: 1, // 页码
      navClass: 'layui-this',
      selected: this.$store.state.navSelected
    }
  },
  methods: {
    selectedNav (index, categoryId) {
      this.$store.commit('saveNavSelected', index)
      this.$store.commit('saveNavCategory', categoryId)
      this.selected = this.$store.state.navSelected
      this.$emit('selectedNav', categoryId, this.page)
    }
  }
}
</script>

<style scoped>

</style>